<template>
	<div class="m-login">
		<div class="m-login-content">
			<h4 class="m-login-title">欢迎登录</h4>
			<Form ref="form" :model="loginForm" :rules="loginRules">
		        <FormItem prop="username">
		            <Input type="text" v-model="loginForm.username" placeholder="用户名">
		                <Icon type="md-person" slot="prepend" size="16px" color="#999"></Icon>
		            </Input>
		        </FormItem>
		        <FormItem prop="password">
		            <Input type="password" v-model="loginForm.password" placeholder="密码">
		                <Icon type="md-lock" slot="prepend"></Icon>
		            </Input>
		        </FormItem>
		        <FormItem>
		            <Button type="primary" long :loading="committing" @click="handleLogin">登录</Button>
		        </FormItem>
		    </Form>
		</div>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
export default {
	name: '',
	data() {
		return {
			committing: false,
			loginForm: {
				username: 'admin',
				password: '123456'
			},
			loginRules: {
				username: [
					{required: true, trigger: 'blur', message: '请输入用户名'}
				],
				password: [
					{required: true, trigger: 'blur', message: '请输入密码'}
				]
			}
		}
	},
	methods: {
		handleLogin() {
			this.$store.commit('login', {token: 1, id: 1});
			this.$router.push({name: 'home_index'});
			return false;
			if(this.committing) return false;
			this.$refs.form.validate((valid) => {
				if(valid) {
					this.committing = true;
					Util.ajax.post(this.API['API_ADMIN_LOGIN'], this.loginForm).then((res) => {
						this.$Message.success('登录成功');
						this.$store.commit('login', res);
						this.$router.push({name: 'home_index'});
					}).catch(() => {
						this.committing = false;
					})
				}
			})	
		}
	}
}
</script>

<style lang="less">
.m-login {
	position: relative;
	min-width: 1200px;
	height: 100%;
	background-color: #333;
	&-content {
		position: absolute;
		right: 100px;
		top: 50%;
		padding: 20px;
		width: 320px;
		min-height: 320px;
		border-radius: 10px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	&-title {
		margin-bottom: 40px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ddd;
	}
}
</style>